<template>
  <div class="container" v-if="luckDrawData.status_type!='end'">
    <div class="meTitle">
      <!-- <img src="/static/img/tabBar/contact.png"/>我的抽奖 -->
    </div>
    <img src="https://ciy.oss-cn-shenzhen.aliyuncs.com/uploads/2018/9/15/72dec83ddf4fbca6e81a0df7b1ac75f3.jpg" class="bannerImg" mode="aspectFill"/>

    <div class="imgWrap">
    <form @submit="luckDrawClick($event,luckDrawData.id)" :report-submit="true">
     <!--  <img :src="luckDrawImg ? 'http://file.rzkeji.com/web/loveciy/img/luckDraw/luckDraw2.png' : 'http://file.rzkeji.com/web/loveciy/img/luckDraw/luckDraw1.png'" class="clickImg" mode="aspectFill" @click="luckDrawClick(luckDrawData.id)"/>  -->
      <button formType="submit" hover-class="none"  class='submit_kong_btn'>
        <img :src="luckDrawImg ? 'http://file.rzkeji.com/web/loveciy/img/luckDraw/luckDraw2.png' : 'http://file.rzkeji.com/web/loveciy/img/luckDraw/luckDraw1.png'" class="clickImg" mode="aspectFill" /> 
      </button> 
    </form>
      <img src="http://file.rzkeji.com/web/loveciy/img/luckDraw/increase2.png" class="increase" @click="increaseRate"/>
    </div>
    
    <div class="improveTip" v-if="tipShow">先点击抽奖再提高中奖率哦</div>
    <div class="processDetails">
        分享提高中奖率，提升中奖率60%<br/>
        每邀请一个好友助力即可提高2％中奖率<br/>
        点击上方按钮，生成专属助力二维码图片
    </div>
    <process :processData="processData"></process>
    <div class="improvePrize">
      <ul class="clickList improveList">
        <li v-for="(imgSrc,index) in supportImgList" :key="index">
          <img :src="imgSrc" mode="aspectFill"/>
        </li>
      </ul>
      <div class="clickDetails improveDetails">已有{{luckDrawData.support_num}}人参与助力,<span class="fontGreen" @click="lookMore">查看全部 ></span></div>
    </div>
  </div>
</template>

<script>
import process from '@/pages/components/process/index.vue'
export default {
  props:['luckDrawData'],
  components: {
    process
  },
   
  data () {
    return {
    	tipShow:false,
      luckDrawImg:"",
      fromId:""
    }
  },
  computed:{
    supportImgList(){
      if(this.luckDrawData.length!=0){
        return this.luckDrawData.support_img_list.slice(0,10);
      }
    },
    listId(){
      return this.$store.state.modulesLuck.listId
    },
    processData(){
      if(this.luckDrawData.length!=0){
          var winning_money = this.luckDrawData.join_info!=null? this.luckDrawData.join_info.winning_odds : 0;
        return {
          winning_odds:this.luckDrawData.join_info !=null? this.luckDrawData.join_info.winning_odds : 0,
          winning:100,
          winning_money :winning_money + "%",
          type:"draw"
        }
      }
    },
    key(){
      return this.$store.state.modulesLuck.key
    }
  },
  watch:{
    luckDrawData:function(newValue,oldValue){
      this.luckDrawImg=newValue.join_info==null ? false : true;
    }
  },
  methods:{
    increaseRate(){
      let luckTip=this.$store.state.modulesLuck.luckTip;
      console.log(this.$store.state.modulesLuck.luckTip)
      if(!luckTip){
        this.tipShow=true;
      }else{
        this.$store.dispatch('setCommitBtn',true)
      }
    },
    lookMore(){
      wx.navigateTo({
        url:`/pages/drawList/imagesDetails/imagesDetails?id=${this.listId}&type=support`
      })
    },
     async luckDrawClick(e,id){
      var formId = e.mp.detail.formId;
      var userToken=wx.getStorageSync('userToken')
      if(this.luckDrawData.join_info==null){  //如果是已经抽奖那就不能点击
        let res1=await this.$api.setActivityJoin({ad_id:id,user_token:userToken,key:this.key,form_id:formId})
		if(res1.data.level=="success"){  //如果之前没抽奖，点击后抽奖成功
          this.luckDrawImg=true;
          this.$store.dispatch('setLuckTip',true);
         console.log( this.$store.state.modulesLuck.luckTip)
          this.tipShow=false;
          // this$currency.showToast('你已经抽奖过一次了','none',2000)
          // this.getLuckDrawData();
        };
      }  
    },
  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;}
.processDetails{width: 351px;margin-left: 12px;font-size: 14px;text-align: center;color: #999;margin-top: 30px;line-height: 25px;}
.improvePrize{width: 351px;margin-left: 12px;}
.imgWrap{width: 100%;height: 35.5px;display: flex;justify-content: row;}
.clickImg{width: 123px;height: 35.5px;display: block;margin-right: 20px;margin-left: 54.5px;}
.increase{width: 123px;height: 35.5px;display: block;}
.improveTip{width: 351px;height: 22px;color: red;text-align: center;line-height: 22px;font-size: 12px;}
.meTitle{width: 96%;height: 24px;padding-left: 4%;font-size: 14px;line-height: 24px;margin-bottom: 15px;}
.meTitle img{width: 24px;height: 24px;margin-right: 5px;vertical-align: middle;}
.bannerImg{width: 100%;height: 169px;margin: 10px 0px 20px}
.improveList{margin-top: 30px;margin-bottom: 10px;}
.improveDetails{margin-bottom: 30px;}
.clickList{width: 351px;display: flex;justify-content: row;margin-top: 20px;overflow: hidden;}
.clickList li{margin-left: 5px;}
.clickList li img{width: 30px;height: 30px;}
.clickDetails{width: 190.5px;height: 11.5px;line-height: 11.5px;margin:20px auto ;font-size: 14px;}
.fontGreen{color: #09A110;}
.submit_kong_btn{width:100%;height:100%;left:0;top:0;border:none;background:none;}
.submit_kong_btn::after{ border: none; }
</style>